import React from 'react'
import {
	SettingOutlined,
	HomeFilled,
	AppstoreOutlined,
	ContainerOutlined,
	DesktopOutlined,
	MailOutlined,
	MenuFoldOutlined,
	MenuUnfoldOutlined,
	PieChartOutlined,
	TeamOutlined,
	UserOutlined,
	BarsOutlined
} from '@ant-design/icons'
import HomePage from '@/views/home'
import Basic from '@/views/basic'
import HooksPage from '@/views/hooks'
import Antd from '@/views/antd'
const Handsontable = React.lazy(() => import('@/views/handsontable'))
const DragModal = React.lazy(() => import('@/views/drogModal'))
const FormSearch = React.lazy(() => import('@/views/searchForm'))
const Store = React.lazy(() => import('@/views/store'))
const Antv = React.lazy(() => import('@/views/antv'))
const FramerMotion = React.lazy(() => import('@/views/framer-motion'))

export const routers = [
	{
		key: 'home',
		path: '/home',
		label: '首页',
		icon: <HomeFilled />,
		element: <HomePage />
	},
	{
		key: 'basic',
		path: '/basic',
		label: '基本',
		icon: <TeamOutlined />,
		element: <Basic />
	},
	{
		key: 'hooks',
		path: '/hooks',
		label: 'hooks',
		icon: <PieChartOutlined />,
		element: <HooksPage />
	},
	{
		key: 'antd',
		path: '/antd',
		label: 'Ant Design',
		icon: <ContainerOutlined />,
		element: <Antd />
	},
	{
		key: 'handsontable',
		path: '/handsontable',
		label: '可输入表格',
		icon: <UserOutlined />,
		element: <Handsontable />
	},
	{
		key: 'dragModal',
		path: '/dragModal',
		label: '模态拖拽弹窗',
		icon: <MenuFoldOutlined />,
		element: <DragModal />
	},
	{
		key: 'formSearch',
		path: '/formSearch',
		label: '搜索表单',
		icon: <BarsOutlined />,
		element: <FormSearch />
	},
	{
		key: 'store',
		path: '/store',
		label: '状态管理',
		icon: <DesktopOutlined />,
		element: <Store />
	},
	{
		key: 'antv',
		path: '/antv',
		label: 'AntV',
		icon: <AppstoreOutlined />,
		element: <Antv />
	},
	{
		key: 'framerMotion',
		path: '/framerMotion',
		label: 'Framer Motion',
		icon: <SettingOutlined />,
		element: <FramerMotion />
	}
]
